<template>
  <div class="w-full flex justify-center">
    <div class="flex flex-col">
      <div class="flex w-full justify-around border-b py-2">
        <div>字段</div>
        <div>值</div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div>id</div>
        <div>
          <input type="text" name="id" class="border w-64" v-model="data.id" />
        </div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div>主题</div>
        <div class="flex">
          <div class="ml-3" v-for="item in classifies">
            <label :for="item">{{ item }}</label>
            <input type="radio" name="classify" :id="item" :value="item" v-model="data.classify" />
          </div>
        </div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div>章节</div>
        <div>
          <input type="text" class="border w-64" name="chapter" v-model="data.chapter" />
        </div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div>标题</div>
        <div>
          <input type="text" class="border w-64" name="title" v-model="data.title" />
        </div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div>显示内容</div>
        <div>
          <textarea
            type="text"
            class="border w-64 h-32"
            name="content"
            v-model.trim="data.content"
            disabled
          ></textarea>
        </div>
      </div>
      <div class="flex w-full flex-col justify-around border-b py-2">
        <div class="flex w-full justify-around">
          <div>输入内容</div>
          <button class="border bg-red-500 rounded px-3 py-1 text-white" @click="delContent">删除段落</button>
          <button class="border bg-blue-500 rounded px-3 py-1 text-white" @click="addContent">添加段落</button>
        </div>
        <div>
          <div id="container" class="flex flex-col">
            <textarea type="text"  class="border w-full my-1 px-3 py-2 outline-none shadow h-32"  name="newContent" v-for="item in contents"></textarea>
          </div>
        </div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div class="w-14 ml-3">分类</div>
        <div class="flex flex-wrap justify-around content-center  ">
          <div class="mx-1 flex  items-center" v-for="item in topics">
            <label :for="item">{{ item }}</label>
            <input type="radio" name="topic" :id="item" :value="item" v-model="data.topic" />
          </div>
        </div>
      </div>
      <div class="flex w-full justify-around border-b py-2">
        <div>图片</div>
        <div>
          <input type="text" class="border w-64" name="image" v-model="data.image" />
        </div>
      </div>

      <div class="flex justify-center w-full mt-5">
        <button class="border mx-3 bg-green-500 rounded px-3 py-1 text-white" @click="useReset" >重置</button>
        <button class="border mx-3 bg-blue-500 rounded px-3 py-1 text-white" @click="writeDocument">提交</button>
      </div>

      
      <div>
        <div class="flex flex-col items-center my-3 w-full mb-10">
          <div class="flex justify-around w-full mt-2">
            <label class="">条件</label>
            <input class=" border w-64" type="text" name="condition" v-model="query.condition" />
          </div>
          <div class="flex justify-around w-full mt-2">
            <label class="">数量</label>
            <input class="border w-64" type="text" name="limit" v-model="query.limit" />
          </div>
          <div class="flex justify-around w-full mt-2">
            <label class="">跳过</label>
            <input class="border w-64" type="text" name="skip" v-model="query.skip" />
          </div>
        </div>
        <div class="flex justify-center">
          <button @click="getDocument('getDoc', query)" class="border mx-3 bg-blue-500 rounded px-3 py-1 text-white" >获取文档</button>
          <button @click="praseDocument" class="border mx-3 bg-green-500 rounded px-3 py-1 text-white" >解析文档</button>
        </div>
        <div>共有{{ reactDoc.data.res.length }}条数据</div>
        <div class="docItem" v-for="item in reactDoc.data.res">
          <div v-for="(value, key) in item">
            <div>{{ key }}:{{ value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { getNewContent, reactDoc, getDocument, reset } from "../utils/utils";
import axios from "axios";
import { config } from "../config";




//获取Dom元素，进行添加删除操作
let $contents1: any 
onMounted(() => {
  $contents1 = document.getElementById('container')?.children 
})
const contents: Array<string> = reactive([''])
const addContent = () => {
  contents.push('')
}
const delContent = () => {
  contents.length > 0 ? contents.pop() : ''
}

//查询操作
const query = reactive({
  condition: '',
  limit: 999,
  skip: 0
})

//解析方法

const praseDocument = () => {
  try {
    data.chapter = reactDoc.data.res[0].chapter
    data.content = reactDoc.data.res[0].content
    data.image = reactDoc.data.res[0].image
    data.chapter = reactDoc.data.res[0].chapter
    data.id = reactDoc.data.res[0].id,
      data.title = reactDoc.data.res[0].title
    data.classify = reactDoc.data.res[0].classify
    data.topic = reactDoc.data.res[0].topic
  } catch (err) {
    alert('先获取文档！')
  }

}


//表单数据初始化

const topics = reactive(['firstTopic', 'secondTopic', 'thirdTopic', 'lastTopic', 'main'])
const classifies = reactive(['睡眠', '皮肤', '眩晕'])
const data= reactive({
  chapter: '',
  content: '',
  image: '',
  title: '',
  id: '',
  topic: '',
  classify: ''
})

//表单方法
const writeDocument = async () => {
  if (getNewContent($contents1).value !== '<p></p>\n') data.content = getNewContent($contents1).value

  if (data.id && data.chapter && data.content && data.title && data.topic && data.classify) {
    (await axios.post(`${config.uri}/submit`, data)).data
    alert('保存成功！')

    reset(data, [{key:'id' ,type: 'add'},{key:'classify' ,type: 'stop'},{key:'topic' ,type: 'stop'},{key:'chapter' ,type: 'stop'},])
  }
  else alert('数据不完整!')
}

const useReset = ()=> {
  reset(data)
}



</script>



<style lang="scss" scoped>
</style>
